<template>
  <div class="ai-marketing-page">
    <!-- 标题与说明 -->
    <div class="header-section">
      <div class="title">AI 小红书营销定位</div>
      <div class="desc">
        一句话推销您的产品或服务，限20字以内。您可以在小红书搜索您的产品或服务+所在城市，如果是面向全国，可以输入您公司所在的城市。<br /><br />
        您可以在小红书搜索后观看10篇帖子，再思考一句话推销文案，获取得分。
      </div>
    </div>

    <!-- 文案输入与评分按钮 -->
    <form class="input-form" @submit.prevent="handleScore">
      <div class="form-item">
        <label class="form-label">请输入您的一句话推销文案</label>
        <div class="input-with-counter">
          <input
            class="form-input"
            v-model="form.slogan"
            placeholder="限30字以内"
            maxlength="30"
          />
          <div class="word-counter">
            {{ form.slogan ? form.slogan.length : 0 }}/30
          </div>
        </div>
      </div>
      <button class="score-btn" type="submit" :disabled="isLoading">
        {{ isLoading ? '分析中...' : '开始分析' }}
      </button>
    </form>

    <!-- 文案分析节点 -->
    <div class="analysis-section">
      <div class="section-header">
        <div class="analysis-title">文案分析节点</div>
        <div class="analysis-desc">AI分析结果将自动填充</div>
      </div>

      <div class="analysis-form">
        <div class="form-item">
          <label class="form-label">AI分析结论</label>
          <!-- 使用普通div确保长文本完整显示 -->
          <div class="form-textarea">
            <div class="full-content">{{ analysisResult || '等待AI分析...' }}</div>
          </div>
        </div>
        <div class="form-item">
          <label class="form-label">得分</label>
          <input
            class="form-input"
            :value="scoreDisplay"
            placeholder="请等待打分"
            disabled
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import store from '@/store'

export default {
  data() {
    return {
      form: {
        slogan: ''
      },
      analysisResult: '', // 存储AI分析结论
      backendScore: null, // 存储后端返回的得分
      isLoading: false
    };
  },
  computed: {
    scoreDisplay() {
      // 显示得分或等待提示
      return this.backendScore !== null && this.backendScore !== undefined
        ? this.backendScore
        : '请等待打分';
    }
  },
  methods: {
    handleScore() {
      if (!this.form.slogan || !this.form.slogan.trim()) {
        this.$modal.msgError('请输入推销文案');
        return;
      }

      this.isLoading = true;
      this.analysisResult = '';
      this.backendScore = null;

      request.post('http://localhost:8080/system/dict/type/user/getUserMessage', {
        userQuestion: this.form.slogan,
        userId: store.getters.id
      }).then(res => {
        if (res.code === 2000) {
          // 根据新的数据结构获取数据
          if (res.data && res.data.message) {
            // 显示data.message中的内容
            this.analysisResult = res.data.message;

            // 显示data.score中的得分
            this.backendScore = res.data.score !== undefined && res.data.score !== null
              ? res.data.score
              : '无评分';
          } else {
            // 如果数据结构不符合预期
            this.analysisResult = '返回数据格式不符合预期';
            this.backendScore = '无评分';
          }

          this.$modal.msgSuccess('分析完成');
        } else {
          // 完整错误信息
          this.analysisResult = `分析失败: ${res.msg || '无错误信息'}`;
          this.$modal.msgError(res.msg || '分析失败');
        }
      }).catch(err => {
        this.analysisResult = `网络请求失败: ${err.message || '未知错误'}`;
        this.$modal.msgError(err.message || '请求失败');
      }).finally(() => {
        this.isLoading = false;
      });
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.ai-marketing-page {
  padding: 20px 16px;
  max-width: 100%;
  box-sizing: border-box;
  background-color: #fff;
}

.header-section {
  margin-bottom: 30px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.4;
}

.desc {
  color: #666;
  line-height: 1.8;
  font-size: 15px;
}

.input-form {
  background-color: #f8f9fb;
  padding: 25px 20px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.form-item {
  margin-bottom: 25px;
}

.form-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #333;
  font-size: 16px;
}

.input-with-counter {
  position: relative;
}

.form-input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  padding-right: 70px;
  border: 1px solid #e1e3e7;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
}

/* 优化文本区域样式确保内容完整显示 */
.form-textarea {
  width: 100%;
  min-height: 200px;
  max-height: 500px;
  padding: 12px 15px;
  border: 1px solid #e1e3e7;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  background-color: #f9f9f9;
  box-sizing: border-box;
  line-height: 1.6;
  white-space: pre-wrap; /* 保留空白和换行 */
  word-break: break-word; /* 允许长单词换行 */
  overflow-y: auto; /* 必要时显示滚动条 */
  font-family: inherit;
}

/* 确保内容完整显示 */
.full-content {
  display: block;
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

.word-counter {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #999;
}

.score-btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 10px;
  cursor: pointer;
}

.score-btn:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.analysis-section {
  margin-top: 40px;
}

.section-header {
  margin-bottom: 20px;
}

.analysis-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.analysis-desc {
  color: #999;
  font-size: 14px;
  line-height: 1.6;
}

.analysis-form {
  background-color: #f8f9fb;
  padding: 25px 20px;
  border-radius: 12px;
}

/* 响应式调整 */
@media (min-width: 768px) {
  .ai-marketing-page {
    padding: 30px;
    max-width: 750px;
    margin: 0 auto;
  }

  .score-btn {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .form-textarea {
    min-height: 250px;
  }
}
</style>
